<div class="search_box">
    <div nz-row nzGutter="16">
        <div nz-col nzSpan="2">
            <button nzType="primary" nz-button class="add" (click)="showModal()">新增</button>
            <!-- <button nz-button>打印单据</button> -->
        </div>
        <div nz-col nzSpan="10"></div>
        <div nz-col nzSpan="7">
            <label class="left_label" style="display: inline-block;width: 30%;">申请日期段：</label>
            <nz-range-picker nzDropdownClassName="date-range" class="dateSelect" ngModel
                (ngModelChange)="onDateChange($event)" style="width: 68%;"></nz-range-picker>
        </div>
        <div nz-col nzSpan="5">
            <label>源库房：</label>
            <nz-select nzDropdownClassName="select_custom" nzPlaceHolder="请选择" [(ngModel)]="sourceWareHouseSearch"
                (ngModelChange)="onSearchHouseChange()" style="width: 74%;">
                <nz-option nzLabel="-请选择-" nzValue=""></nz-option>
                <nz-option *ngFor="let item of sourceHouseData" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
            </nz-select>
        </div>
    </div>
</div>
<div class="table_box">
    <nz-table #listTable [nzData]="listData" [nzFrontPagination]="false" [nzBordered]="true" nzSize="small" >
        <thead>
            <tr>
                <th>移库单号</th>
                <th>物料编码</th>
                <th>物料名称</th>
                <th>批次</th>
                <th>源库房</th>
                <th>源库区</th>
                <th>源库房可用量</th>
                <th>目标库房</th>
                <th>目标库区</th>
                <th>申请移库量</th>
                <th>实际移库量</th>
                <th>挑库类型</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of listTable.data">
                <td>{{ data.id }}</td>
                <td>{{ data.materialCode }}</td>
                <td>{{ data.materialName }}</td>
                <td>{{ data.barcodeBatch }}</td>
                <td>{{ data.fromStorehouse.name }}</td>
                <td>{{ data.fromStorehouseArea.name }}</td>
                <td>{{ data.fromStorehouseAmount }}</td>
                <td>{{ data.toStorehouse.name }}</td>
                <td>{{ data.toStorehouseArea.name }}</td>
                <td>{{ data.reqAmount }}</td>
                <td>{{ data.resAmount }}</td>
                <td>{{ data.pickingTypeLabel }}</td>
                <td>{{ data.statusName }}</td>
                <td>
                    <div class="btn_group" style="margin-top: 0;">
                        <button *ngIf="data.status!==3&&data.status!==2" nz-button style="margin-top: 5px;" class="edit" (click)="showModal(data)">编辑</button>
                        <button *ngIf="data.status==0" nz-button style="margin-top: 5px;" class="del" (click)="del(data)">删除</button>
                        <button *ngIf="data.status==0" nz-button style="margin-top: 5px;" (click)="editStatus(data, 1)">提交</button>
                        <button *ngIf="data.status===3" nz-button style="margin-top: 5px;" (click)="editStatus(data, 2)">确认入库</button>
                    </div>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>
<div nz-row class="page_box">
    <nz-pagination (nzPageIndexChange)="clickPage($event)" [nzPageIndex]="pageIndex" [nzTotal]="dataCount"
        [nzPageSize]="pagesize" [nzShowTotal]="totalTemplate"></nz-pagination>
    <ng-template #totalTemplate let-total> 总共 {{dataCount}} 条 </ng-template>
</div>
<div id="modal_box"></div>
<nz-modal appDragModal [nzStyle]="{left:'26%',top:'18%'}" nzMaskClosable="false" [nzGetContainer]="modalDomBox" [(nzVisible)]="isShow" nzTitle="新增申请"
    (nzOnCancel)="handleCancel()" [nzFooter]="null" class="hmodal" nzWidth="60%">
    <form nz-form [formGroup]="applyForm" (ngSubmit)="submitFn()">
        <div class="table_modal">
            <div nz-row nzGutter="10">
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>物料编码</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请选择物料编码">
                            <nz-select nzShowSearch nzDropdownClassName="select_custom" nzAllowClear nzPlaceHolder="请选择物料编码"
                                formControlName="materialCode" (ngModelChange)="onMaterialChange($event)">
                                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                                <nz-option *ngFor="let item of subMaterialList" [nzValue]="item.code"
                                    [nzLabel]="item.code">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>物料名称</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input disabled formControlName="materialName" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>移库类型</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请选择移库类型">
                            <nz-select nzDropdownClassName="select_custom" nzAllowClear nzPlaceHolder="请选择移库类型"
                                formControlName="moveType" (ngModelChange)="onMoveTypeChange($event)">
                                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                                <nz-option *ngFor="let item of moveWareTypeList" [nzValue]="item.value"
                                    [nzLabel]="item.label"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
              
            </div>
            <div nz-row nzGutter="10">
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>源库房</nz-form-label>
                        <nz-form-control [nzSpan]="16" [nzErrorTip]="sourceHouseTpl">
                            <nz-select nzDropdownClassName="select_custom" nzAllowClear nzPlaceHolder="请选择源库房"
                                formControlName="sourceHouse" (ngModelChange)="onSourceHouseChange($event, 1)">
                                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                                <nz-option *ngFor="let item of materiHouseData" [nzValue]="item.id"
                                    [nzLabel]="item.name">
                                </nz-option>
                            </nz-select>
                            <ng-template #sourceHouseTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">
                                    请选择源库房
                                </ng-container>
                                <ng-container *ngIf="control.hasError('noSameHouse')">
                                    源库房和目标库房必须相同
                                </ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>源库区</nz-form-label>
                        <nz-form-control [nzSpan]="16" [nzErrorTip]="sameAreaTpl">
                            <nz-select nzDropdownClassName="select_custom" nzAllowClear nzPlaceHolder="请选择源库区"
                                formControlName="sourceArea" (ngModelChange)="onSourceAreaChange($event)">
                                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                                <nz-option *ngFor="let item of sourceAreaData" [nzValue]="item.warehouseAreaId"
                                    [nzLabel]="item.warehouseAreaName"></nz-option>
                            </nz-select>
                            <ng-template #sameAreaTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">
                                    请选择源库区
                                </ng-container>
                                <ng-container *ngIf="control.hasError('sameArea')">
                                    源库区和目标库区不能相同
                                </ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>目标库房</nz-form-label>
                        <nz-form-control [nzSpan]="16" [nzErrorTip]="targetHouseTpl">
                            <nz-select nzDropdownClassName="select_custom" nzAllowClear nzPlaceHolder="请选择目标库房"
                                formControlName="targetHouse" (ngModelChange)="onSourceHouseChange($event, 2)">
                                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                                <nz-option *ngFor="let item of materiHouseData" [nzValue]="item.id"
                                    [nzLabel]="item.name">
                                </nz-option>
                            </nz-select>
                            <ng-template #targetHouseTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">
                                    请选择目标库房
                                </ng-container>
                                <ng-container *ngIf="control.hasError('noSameHouse')">
                                    源库房和目标库房必须相同
                                </ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
              
            </div>
            <div nz-row nzGutter="10">
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>目标库区</nz-form-label>
                        <nz-form-control [nzSpan]="16" [nzErrorTip]="targetAreaTpl">
                            <nz-select nzDropdownClassName="select_custom" nzAllowClear nzPlaceHolder="请选择目标库区"
                                formControlName="targetArea" (ngModelChange)="onTargetAreaChange()">
                                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                                <nz-option *ngFor="let item of targetAreaData" [nzValue]="item.warehouseAreaId"
                                    [nzLabel]="item.warehouseAreaName"></nz-option>
                            </nz-select>
                            <ng-template #targetAreaTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">
                                    请选择源库区
                                </ng-container>
                                <ng-container *ngIf="control.hasError('sameArea')">
                                    源库区和目标库区不能相同
                                </ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>挑库类型</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请选择挑库类型">
                            <nz-select nzDropdownClassName="select_custom" nzAllowClear nzPlaceHolder="请选择挑库类型"
                                formControlName="chooseType" (ngModelChange)="onChooseTypeChange($event)">
                                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                                <nz-option *ngFor="let item of chooseWareTypeList" [nzValue]="item.value"
                                    [nzLabel]="item.label"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>批次</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请选择批次">
                            <nz-select nzDropdownClassName="select_custom" nzAllowClear nzPlaceHolder="请选择批次"
                                formControlName="batch" [nzDisabled]="chooseTypeValue == 1"
                                (ngModelChange)="onBatchChange($event)">
                                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                                <nz-option *ngFor="let item of batchData" [nzValue]="item.barcodeBatch"
                                    [nzLabel]="item.barcodeBatch">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                
            </div>
            <div nz-row nzGutter="10">
                <!-- <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>移库类型</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请选择移库类型">
                            <nz-select nzDropdownClassName="select_custom" nzAllowClear nzPlaceHolder="请选择移库类型"
                                formControlName="moveType" (ngModelChange)="onMoveTypeChange($event)">
                                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                                <nz-option *ngFor="let item of moveWareTypeList" [nzValue]="item.value"
                                    [nzLabel]="item.label"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div> -->
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="9" nzRequired>批次现有量</nz-form-label>
                        <nz-form-control [nzSpan]="16" nzErrorTip="请输入批次现有量">
                            <input nz-input disabled placeholder="请输入批次现有量" formControlName="batchNum" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="8">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="8" nzRequired>移库数量</nz-form-label>
                        <nz-form-control [nzSpan]="16" [nzErrorTip]="moveNumTpl">
                            <input nz-input type="number" placeholder="请输入移库数量" formControlName="moveNum" />
                        </nz-form-control>
                        <ng-template #moveNumTpl let-control>
                            <ng-container *ngIf="control.hasError('required')">
                                请输入移库数量
                            </ng-container>
                            <ng-container *ngIf="control.hasError('moveNum')">
                                移库数量必须小于批次现有量
                            </ng-container>
                        </ng-template>

                    </nz-form-item>
                </div>
            </div>
            <div class="btn_group" style="margin-top:0;" *ngIf="editId === -1">
                <button nz-button class="add" (click)="modalAdd($event)">添加</button>
                <button nz-button class="del" (click)="modalDel()" [disabled]="deleteIds.length === 0"
                    [ngClass]="{'disabledBg': deleteIds.length === 0}">删除</button>
            </div>
            <div class="table_box" *ngIf="editId === -1">
                <nz-table #modalListTable [nzData]="modalList" nzSize="small">
                    <thead>
                        <tr>
                            <th nzShowCheckbox [(nzChecked)]="isAllChecked" [nzIndeterminate]="isHalfChecked"
                                (nzCheckedChange)="checkAll($event)"></th>
                            <th>物料编码</th>
                            <th>物料名称</th>
                            <th>源库房</th>
                            <th>源库区</th>
                            <th>目标库房</th>
                            <th>目标库区</th>
                            <th width="100px">挑库类型</th>
                            <th>批次</th>
                            <th>移库量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of modalListTable.data">
                            <td nzShowCheckbox [(nzChecked)]="checkedArr[data.id]" (nzCheckedChange)="checkItem()"></td>
                            <td>{{ data.materialCode }}</td>
                            <td>{{ data.materialName }}</td>
                            <td>{{ data.sourceHouseName }}</td>
                            <td>{{ data.sourceAreaName }}</td>
                            <td>{{ data.targetHouseName }}</td>
                            <td>{{ data.targetAreaName }}</td>
                            <td>{{ data.chooseName }}</td>
                            <td>{{ data.batch }}</td>
                            <td>{{ data.moveNum }}</td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
        <div nz-row class="custome_modal_footer">
            <div nz-col nzSpan="24" style="text-align: right;">
                <button nz-button type="button" nzType="default" (click)="handleCancel()">取消</button>
                <button nz-button nzType="primary" [nzLoading]="isOkLoading">确定</button>
            </div>
        </div>
    </form>
</nz-modal>